import React from 'react';
import { connect } from 'dva';
import RH from 'react-highcharts';
import _ from 'lodash';
import { Table } from 'antd';
import Granularity from '../../../components/granularity';
import common from '../common.less';

const parseChartData = (data) => {
    const res = {};
    _.forEach(data, ({ name, times }) => {
        if (!res.categories) {
            res.categories = [];
        }
        res.categories.push(name);
        if (!res.times) {
            res.times = [];
        }
        res.times.push(times);
    });
    return res;
};

const defImg = require('../../../assets/img/imgless.png');

function Games({ data, searchInfo: { type, date }, dispatch }) {
    const newData = _.reverse(_.sortBy(data, 'times'));
    const columns = [
        {
            title: '游戏名称',
            key: 'name',
            render: (t, { name, img }) => {
                return (
                    <div className={common.gameTitle}>
                        <img src={img || defImg} />
                        <h2>{name}</h2>
                    </div>
                );
            }
        },
        {
            title: '类型',
            dataIndex: 'category',
            key: 'category',
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
        },
        {
            title: '运行次数(次)',
            dataIndex: 'times',
            key: 'times',
            render(t) {
                return <h2>{t}</h2>;
            },
        },
    ];
    const res = parseChartData(newData);
    const config = {
        chart: {
            type: 'column',
            inverted: true,
            style: {
                height: '600px'
            }
        },
        title: { text: '游戏运行报表' },
        credits: {
            enabled: false,
        },
        xAxis: {
            title: {
                text: '游戏',
            },
            categories: res.categories,
            labels: {
                formatter() {
                    return this.value;
                }
            },
            tickHeight: 120
        },
        yAxis: {
            title: {
                text: '运行(次)',
            },
        },
        series: [
            {
                name: '运行次数',
                data: res.times,
            }
        ],
        plotOptions: {
            column: {
                colorByPoint: true,
            },
        },
    };
    const onChange = (searchInfo) => {
        dispatch({
            type: 'games/changeSearchType',
            searchInfo,
        });
    };
    return (
        <div className={common.normalWrap}>
            <div className={common.search}>
                <Granularity
                    type={type}
                    value={date}
                    onChange={onChange}
                />
            </div>
            <div className={common.table}>
                <RH config={config} />
                <Table
                    rowKey="id"
                    columns={columns}
                    dataSource={newData}
                />
            </div>
        </div>
    );
}

function mapStateToProps({ games }) {
    return { ...games };
}

export default connect(mapStateToProps)(Games);
